<template>
  <div>
    <!-- <el-alert :closable="false"
    style="width:200px;display:inline-block;vertical-align: middle;margin-left:0px;"
    effect="dark" :title="currentTag.tag_name" type="success" /> -->
    <el-card v-if="list.length !== 0" class="box-card">
      <div slot="header" class="clearfix">
        <el-tag type="success">
          <svg-icon :icon-class="currentTag.svg_name" />
          <span>{{ currentTag.tag_name }}</span>
        </el-tag>
      </div>
      <!-- <el-tabs v-if="currentTag.tag_name === '所有商品'" v-model="activeName" style="margin-top:15px;" type="border-card">
        <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
          <el-row :gutter="8">
            <el-col
              v-for="article in list"
              :key="article.id"
              :xs="{span: 24}"
              :sm="{span: 12}"
              :md="{span: 12}"
              :lg="{span: 6}"
              :xl="{span: 6}"
              style="margin-bottom:30px;"
            >
              <box-card :article="article" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs> -->
      <el-row style="margin-top:15px;" :gutter="8">
        <el-col
          v-for="article in list"
          :key="article.id"
          :xs="{span: 24}"
          :sm="{span: 12}"
          :md="{span: 12}"
          :lg="{span: 6}"
          :xl="{span: 6}"
          style="margin-bottom:30px;"
        >
          <box-card :article="article" />
        </el-col>
      </el-row>
    </el-card>

    <!-- <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <el-row :gutter="8">
          <el-col
            v-for="article in articleList"
            :key="article.id"
            :xs="{span: 24}"
            :sm="{span: 12}"
            :md="{span: 12}"
            :lg="{span: 6}"
            :xl="{span: 6}"
            style="margin-bottom:30px;"
          >
            <box-card :article="article" />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script>
// import tabPane from './components/TabPane'
import BoxCard from './components/BoxCard'
import { mapGetters, mapActions } from 'vuex'
import { fetchList, fetchArticleList } from '@/api/panel'

export default {
  name: 'CategoryTab',
  components: {
    BoxCard
  },
  props: {
    currentTag: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [],
      tabMapOptions: [
        { label: '所有产品', key: 'ALL' },
        { label: '绿茶', key: 'lvcha' },
        { label: '白茶', key: 'baicha' },
        { label: '红茶', key: 'hongcha' },
        { label: '乌龙茶', key: 'wulongcha' },
        { label: '黑茶', key: 'heicha' },
        { label: '黄茶', key: 'huangcha' }
      ],
      activeName: 'ALL',
      createdTimes: 0
    }
  },
  watch: {
    currentTag: {
      deep: true,
      handler(val) {
        console.log('watch currentTag:', this.currentTag)
        this.getList()
      }
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
    this.getList()
  },
  mounted() {
    // console.log("mounted this.listQuery :",this.listQuery);
    this.getList()
  },
  methods: {
    getList() {
      fetchArticleList(this.currentTag.tag_id).then(response => {
        this.list = response.data.items
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
